@import (reference) '~antd/es/style/themes/index';

@pro-header-hover-bg: rgba(0, 0, 0, 0.025);

.wrapper {
    width: 100%;
    height: 48px;
    margin-left: auto;
    overflow: hidden;
    text-align: right;
    .action {
        display: flex;
        align-items: center;
        height: 48px;
        padding: 0 12px;
        cursor: pointer;
        transition: all 0.3s;
        > span {
            vertical-align: middle;
        }
        &:hover {
            background: @pro-header-hover-bg;
        }
        &:global(.opened) {
            background: @pro-header-hover-bg;
        }
    }
    .account {
        .avatar {
            margin-right: 8px;
            color: @primary-color;
            vertical-align: top;
            background: rgba(255, 255, 255, 0.85);
        }
    }

    a {
        line-height: 48px;
    }
}

@media only screen and (max-width: @screen-md) {
    :global(.ant-divider-vertical) {
        vertical-align: unset;
    }
    .name {
        display: none;
    }
    .warpper {
        position: absolute;
        top: 0;
        right: 12px;
        .account {
            .avatar {
                margin-right: 0;
            }
        }
        .search {
            display: none;
        }
    }
}
